// 1. 导入 vue3.5-learn\src\utils\color.ts
import { useSettingStore } from "@/stores/settings"
// 2. 导入 @/stores/settings
import { generateColors, setColors } from "@/utils/color"
// 3. 建立 hook 钩子
export const useGenerateTheme = () => {
  // 3-1, 使用 useSettingStore
  const store = useSettingStore()
  // 3-2, 简化 theme
  const theme = computed(() => store.settings.theme)
  // 3-3, 简化 originalTheme
  const originalTheme = computed(() => store.settings.originalTheme)
  // 3-4，监控主题的变化，判断是否和以前的主题颜色是否相同，不相同生成新的主题颜色,更新到store中
  watchEffect(() => {
    // 3-4-1，用户设置的主题和原来的不一致，重新生成主题色
    if (theme.value !== originalTheme.value) {
      const colors = {
        primary: theme.value, // 设置 priamry 的颜色
        ...generateColors(theme.value) // 设置  primary-light-1/9 的颜色
      }
      // 3-4-2，设置 html 主题 的颜色, 应用在根元素上
      setColors(colors)
      // 3-4-3，修改 originalTheme
      store.changeSetting({ key: "originalTheme", value: theme.value })
    }
  })
}
